<template>
  <uni-nav-bar :title="title" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package space-between" v-if="shopInfor">
    <image :src="shopInfor.goods_image" mode="" style="width: 210rpx;height: 210rpx;border-radius: 5px;"></image>
    <view class="direction-start" style="width:66%;height: 210rpx;">
      <view class="title">{{shopInfor.name}}</view>
      <view style="font-size: 28rpx;margin-top: 15rpx;">库存:{{shopInfor.nums}}件</view>
      <view style="font-size: 26rpx;margin-top: 15rpx;color:#666;" v-if="shopInfor.subtitle">{{shopInfor.subtitle}}
      </view>
    </view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package space-between" style="min-height:100rpx" v-for="(item,index) in frinedList" :key="item.id"
      :style="{marginTop:index==0?'0px':'15rpx'}"
      @click="navTo('administrator/welfare/welfareDetail?id='+item.ku_goods_id+'&shopID='+shopID+'&name='+title)">
      <view>{{item.ku_name}}</view>
      <view>{{item.nums}}件</view>
    </view>
    <Popu v-if="frinedList.length<1" :pageHeight="pageHeight" text="暂无商品信息列表"></Popu>
  </scroll-view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { navBack, navTo } from '@/utils/navigator';
  import { showLoading } from '@/utils/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { getGoodsKuList, getGoodsInfo } from '@/gql/warehouse';
  import { toPublish } from '@mqtt';
  /**
   * 商品信息
   * @param shopID 商品ID
   * @param shopInfor 商品详情
   * @param title 页面标题
   * @param pageHeight 页面高度
   * @param frinedList 商品所在仓库列表
   * @param lastPage 总页数
   * @param currentPage 当前页数
   */
  const pageHeight = ref();
  const frinedList = ref([])
  const lastPage = ref(1);
  const currentPage = ref(1);

  const shopID = ref()
  const shopInfor = ref()
  const title = ref()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 210;
    },
  });
  onLoad((pearm) => {
    shopID.value = Number(pearm.id)
    init()
    shopDetail()
  })
  /**
   * 获取商品详情
   */
  function shopDetail() {
    showLoading()
    const payload = {
      query: getGoodsInfo,
      variables: {
        id: Number(shopID.value)
      },
    };
    toPublish(
      'ql/control/getGoodsInfo',
      payload,
      (obj : any) => {
        const { getGoodsInfo } = obj.data;
        shopInfor.value = getGoodsInfo
        title.value = getGoodsInfo.name
      }
    );
  }
  /**
   * 获取商品所在仓库列表信息
   * @param {Number} page  获取商品列表数据
   * @param {String} goods_id  商品ID
   */
  function init() {
    showLoading()
    const payload = {
      query: getGoodsKuList,
      variables: {
        page: currentPage.value,
        goods_id: Number(shopID.value)
      },
    };
    toPublish(
      'ql/control/getGoodsKuList',
      payload,
      (obj : any) => {
        const { getGoodsKuList } = obj.data;
        frinedList.value = [...frinedList.value, ...getGoodsKuList.list];
        lastPage.value = getGoodsKuList.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
</script>

<style scoped lang="less">
</style>